<template>	
<view>
	<mescroll-body ref="mescrollRef"  :down="downOption" :up="upOption" @up="upCallback">
		<view class="addresstip">平台已告知中奖人在<text style="color: #FF0000;">08月22日 10:50</text>之前填写收货地址，中奖人填写收货地址后请及时发货。</view>
		<view class="addresstip" style="color: #FF0000;">注：奖品商城奖品由天天有礼平台发货，详情请看奖品商城操作指南</view>
		<view class="content" v-for="(item,index) in listdata" :key="index">
			<view class="userinfo">
				<view class="contact-head">
					<image :src="item.avatar" mode="aspectFill"></image>
					<view>{{item.nickname}}<text style="color: #378aff;">（{{prizetitle[item.level]}}等奖）</text></view>
				</view>
				<view class="copy-addr" @click="copyaddr(index)">
					一键复制
				</view>
			</view>

			<view class="contact-addr">
				{{item.address}}
			</view>
			
			<view class="win-message" v-if="item.remark">
				<text>中奖者留言：</text>
				<text>{{item.remark}}</text>
			</view>
			<view class="contact" @click="visible=true">联系中奖者</view>
		</view>
	</mescroll-body>
	<view class="duihuan" @click="exportexcel">
		<view class="huan-button">中奖者导出</view>
	</view>
	<!--联系中奖人-->
	<alert modeltitle="联系中奖者" :visible="visible">
		<form @submit="subform" style="width: 100%">
		<view class="contact-box">
			<input type="text" name="contents" placeholder="请输入通知内容限(15个字)" maxlength="15" class="inputstyle"/>
			<button class="contact-botton" form-type="submit" >立即通知</button>
		</view>
		</form>
	</alert>
	</view>
</template>

<script>
	/**
	 * 中奖者填写收货地址
	 */
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				prizetitle: ['一', '二', '三', '四', '五'],
				visible:false,
				dreawaddrid: '', //奖品的收货地址
				listdata: [],//中奖者id
				noticeinfo:'',//通知内容
				upOption: {
					// page: {
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 搜索无数据 ~', // 提示
						btnText: ''
					},
					textLoading: "玩命加载中 ...",
					textNoMore: "-- 人家是有底线的 --",
				},
				downOption: {
					use: false
				},
				excelurl:'',//导出excel地址
			}
		},
		onLoad(option) {
			if (option.id) {
				 this.dreawaddrid = option.id
			}
			uni.$on("closewindown", (close) => {
				this.visible = close
			})
		},
		
		methods: {
			//导出excel
			exportexcel(){
				let msgaddr = 'excel表格导出成功，请粘贴地址到你微信或浏览器！' 
				if(this.excelurl){
					this.clipboard(this.excelurl,msgaddr);
					return;
				}
				this.$HttRequest({
					url: '/lottery/winOrderExcel', 
					param: {id:this.dreawaddrid}
				}).then((res) => {
					console.log(res); 
					if (res.status === 10000) {
						this.excelurl = res.data;
						this.clipboard(res.data,msgaddr);
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
			},
			//复制收货地址
			copyaddr(index){
				let address =  this.listdata[index].address
				if(!address){
					this.$ShowMsg('中奖者未填写地址');
					return;
				}
				this.clipboard(address,'中奖用户地址复制成功！');
			},
			//复制函数
			clipboard(info,msg){
				uni.setClipboardData({
				    data: info,
				    success: function () {
						uni.showToast({
							title: msg,
							duration: 3500,
							icon: "none",
							mask: true
						})
				    }
				})
			},
			
			//提示内容
			subform(e){
				console.log(e)
				let formdata = e.detail.value;
				if(!formdata.contents){
					this.$ShowMsg('请填写通知内容');
					return
				}
				this.$ShowMsg('通知成功！')
				this.visible = false;
				//提交后端
			},
			//通知用户
			notice(){
				this.$ShowMsg('通知成功！');
				this.visible= false
			},
			upCallback(page) {
				this.getinitdata(page.num,this.dreawaddrid).then(res => {
					this.mescroll.endSuccess(res.length);
					//设置列表数据
					if (page.num == 1) this.listdata = []; //如果是第一页需手动制空列表
					this.listdata = this.listdata.concat(res); //追加新数据
				}).catch(error => {
					//联网失败, 结束加载
					this.mescroll.endErr();
					this.$ShowMsg('网络连接失败！');
					console.log(error);
				})
			},
			//获取列表数据
			getinitdata(pages,id) {
				return new Promise((resolve, reject) => {
					this.$HttRequest({
						url: '/lottery/winOrderList',
						param: {
							page: pages,
							id:id,
						}
					}).then((res) => {
						if (res.status === 10000) {
							resolve(res.data.data);
						} else {
							this.mescroll.endErr();
							this.$ShowMsg(res.message);
						}
					}).catch((error) => {
						//异常错误
						reject(error.errMsg);
					});
				});
			
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f0f0f0;
	}
	.contact-box{
		display: flex;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center; 
		.inputstyle{
			height: 60rpx;
			border-radius: 15rpx;
			border: 1rpx solid #f2f2f2;
			width: 100%;
			font-size: 28rpx;
			padding: 10rpx;
		}
		.contact-botton{
			color: #fff;
			width: 100%;
			height: 80rpx;
			background-color: $uni-color-primary;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			margin: 20rpx auto;
			border-radius: 20rpx;
		}
	}

	.content {
		flex: 1;
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		margin: 20rpx 0;
		.userinfo {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			border-bottom: 1rpx solid #f2f2f2;
			padding: 20rpx 0;
			.contact-head {
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					margin-right: 10rpx;
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
				}
			}

			.copy-addr {
				color: #fff;
				background-color: rgba(#000, 0.8);
				padding: 8rpx 15rpx;

				border-radius: 30rpx;
			}
		}

		.contact-addr {
			font-size: 28rpx;
			color: #abaaaa;
			border-bottom: 1rpx solid #f2f2f2;
			padding: 30rpx 0;
		}
		.win-message{
			padding: 20rpx 0;
			font-size: 28rpx;
			color: #333;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			border-bottom: 1rpx solid #f2f2f2;
			text{
				margin: 5rpx 0;
			}
		}
		.contact{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-weight: bolder;
			color: $uni-botton-primary;
			padding: 20rpx 0;
		}
	}


	.addresstip {
		font-size: 28rpx;
		flex: 1;
		background-color: #fff;
		padding: 20rpx;
		color: #333;
		margin-top: 20rpx;
	}

	.duihuan {
		background-color: #fff;
		border-top: 1rpx solid #d7d7d7;
		display: flex;
		width: 100vw;
		position: fixed;

		align-items: center;
		justify-content: center;
		bottom: 0;

		.huan-button {
			background-color: $uni-botton-primary;
			width: 92%;
			height: 85rpx;
			border-radius: 40rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			margin: 20rpx 0;
		}
	}
</style>
